<template>
  <el-main>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item,index) in list">
        <el-card class="box-card dashboard-card" :style="setStyle(item)" @click.native="goSystem(item)">
          <div class ="iconBackground">
            <svg-icon icon-class="server"/>
            <span class="infoContent">{{item.systemName}}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="pagination-container">
      <el-pagination
        :current-page="listQuery.page"
        :page-sizes="[12,24,36,60]"
        :page-size="listQuery.limit"
        :total="total"
        background
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-main>
</template>

<script>
import { mapGetters } from 'vuex'
import {getDashboard } from '@/api/Dashboard'

export default {
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  data() {
    return {
      username:'',
      total: null,
      list: null,
      listLoading: true,
      listQuery: {
        page: 1,
        size: 12
      },
      role:null,
    }
  },
  created() {
    this.getDashboard();  
    this.username = localStorage.getItem('username')  
  },
  methods: {
    indexMethod(index) {
      return this.listQuery.size * (this.listQuery.page - 1) + index + 1
    },
    getDashboard(){
      getDashboard(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    goSystem(item){
      window.open(item.url, "_blank");
    },
    gotoDoctorPatient(){
      this.$router.push({ path:'/doctorPatient/doctorPatient'  })
    },
    gotoSysuser(){
      this.$router.push({ path:'/sysuser/sysuser'  })
    },
    handleSizeChange(val) {
      this.listQuery.size = val
      this.getDashboard()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getDashboard()
    },
    setStyle(item){
      var name = item.systemName;
      var ch, st, re = [],rgb="" ;
        for (var i = 0; i < name.length; i++ ) { 
          ch = name.charCodeAt(i);  // get char  
          st = [];                 // set up "stack"  
          do {  
            st.push( ch & 0xFF );  // push byte to stack  
            ch = ch >> 8;          // shift value down by 1 byte  
          }    
          while ( ch );  
          // add stack contents to result  
          // done because chars have "wrong" endianness  
          re = re.concat( st.reverse() ); 
          rgb+=st[0].toString(16)
          //console.log(st)
        }  
        //console.log(rgb)
        if(rgb.length>6){
          rgb = rgb.substring(0,6)
        }else{
          rgb = rgb + "FFFFFF"
          rgb = rgb.substring(0,6)
        }
        //console.log(rgb)
      let obj = {
        backgroundColor:'#'+rgb,
        cursor:'pointer',
      }
      return obj
    },
  }
}
</script>

<style>
.el-calendar-table .el-calendar-day {
  height: 30px;
  text-align: center;
  line-height: 14px;
}
.dashboard-card{
  margin: 0px 20px 40px 20px;
  height: 20vh;
}
.table-card{
  overflow: hidden;
}
.dashboard-card .el-card__body{
  height:100%;
  padding: 0px;
}
.infoBackground, .iconBackground{
  float: left;
  height: 100%;
  text-align: center;
}
.infoBackground{
  width: 60%;
}
.iconBackground{
  width: 100%;
  margin: 10% 0;
 }
.iconBackground .svg-icon {
  width: 50% !important;
  height: 50%!important;
}
.infoNum, .infoContent{
  word-break: normal;
    width: auto;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
}
.infoNum{
    height: 80px;
    font-size: 32px;
    line-height: 80px;
}
.infoContent{
  height: 48px;
  font-size: 18px;
  line-height: 48px;
}
</style>
